<!DOCTYPE html>
<html>
<head>
<title>Agate Admin</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/img/favicon.ico">
<link id="bs-css" href="/bcs/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/charisma.app.css" rel="stylesheet">
<link href="/css/bootstrap-table.min.css" rel="stylesheet">
<script src="/bcs/js/jquery.min.js"></script>
<script src="/bcs/js/bootstrap.min.js"></script>
<script src="/js/bootstrap-table.min.js"></script>
<script src="/js/jquery.validate.js"></script>
<script src="/js/jquery.history.js"></script>
<script src="/js/jquery.cookie.js"></script>
<script src="/js/autosize.min.js"></script>
<script src="/js/charisma.app.js"></script>
</head>
<body>
	<div class="navbar navbar-default" role="navigation">
		<div class="navbar-inner">
			<button type="button" class="navbar-toggle pull-left animated flip">
				<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="/"><img alt="Charisma Logo" src="/img/logo20.png" class="hidden-xs" /><span>Agate</span></a>
			<!-- user dropdown starts -->
			<div class="btn-group pull-right">
				<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
					<i class="glyphicon glyphicon-user"></i><span class="hidden-sm hidden-xs" id="account"> Admin</span> <span class="caret"></span>
				</button>
				<ul class="dropdown-menu">
					<li><a href="#">Profile</a></li>
					<li class="divider"></li>
					<li><a href="/uac/authen/logout" id="logout">Logout</a></li>
				</ul>
			</div>
			<!-- user dropdown ends -->
			<!-- theme selector starts -->
			<div class="btn-group pull-right theme-container animated tada">
				<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
					<i class="glyphicon glyphicon-tint"></i><span class="hidden-sm hidden-xs"> Change Theme / Skin</span> <span class="caret"></span>
				</button>
				<ul class="dropdown-menu" id="themes">
					<li><a data-value="classic" href="#"><i class="whitespace"></i> Classic</a></li>
					<li><a data-value="slate" href="#"><i class="whitespace"></i> Slate</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="ch-container">
		<div class="row">
			<div id="menu" class="col-sm-2 col-lg-2">
				<div class="sidebar-nav">
					<div class="nav-canvas">
						<div class="nav-sm nav nav-stacked"></div>
						<ul class="nav nav-pills nav-stacked main-menu">
							<li><a id="routes" class="ajax-link" href="/view/route/index.html"><i class="glyphicon glyphicon-list"></i><span> Routes</span></a></li>
							<li><a id="gateways" class="ajax-link" href="/view/gateway/index.html"><i class="glyphicon glyphicon-random"></i><span> Gateways</span></a></li>
							<li><a id="clusters" class="ajax-link" href="/view/cluster/index.html"><i class="glyphicon glyphicon-magnet"></i><span> Clusters</span></a></li>
						</ul>
					</div>
				</div>
			</div>
			<div id="content" class="col-lg-10 col-sm-10"></div>
			<!-- content ends -->
		</div>
		<!--/fluid-row-->
		<hr>
		<footer class="row">
			<p class="col-md-9 col-sm-9 col-xs-12 copyright">&copy; 2019~2022 Agate Manager</p>
			<p class="col-md-3 col-sm-3 col-xs-12 powered-by">
				Powered by: <a href="http://usman.it/free-responsive-admin-template">Charisma</a>
			</p>
		</footer>
	</div>
	<!--/.fluid-container-->
</body>
<script type="text/javascript">
	$(document).ready(function() {
		// init main menu
		initMainMenu();

		initContent();
	});

	function initMainMenu() {
		if (window.history && window.history.pushState) {
			$(window).on('popstate', function(e) {
				// get location hash
				var hash = window.location.hash;
				if (hash != '') {
					var amid = $('li.active a').attr('id');
					hash = hash.substr(1);
					if (amid == hash) {
						return false;
					}
					loadTemplate(hash);
				} else {
					window.history.go(-1);
				}

				return false;
			});
		}

		$('.main-menu a').on('click', function(e) {
			e.preventDefault();

			var hash = this.id;
			loadTemplate(hash);
			window.location.hash = hash;
		});
	}

	function initContent() {
		$.ajax({
			type : 'GET',
			url : '/api/account/info',
			contentType : 'application/json',
			success : function(data) {
				if (data && data.code === 1 && data.result) {
					$('#account').text(' ' + data.result.username);
				}
			}
		});

		// get location hash
		var hash = window.location.hash;
		if (hash == '') {
			hash = 'routes';
		} else {
			hash = hash.substr(1);
		}
		// load content template
		loadTemplate(hash);
		//window.location.hash = hash;
	}

	function loadTemplate(hash) {
		// remove class
		$('.main-menu').find('.active').removeClass('active');

		// add class
		$menu = $('a[id=' + hash + ']');
		$menu.closest('li').addClass('active');

		var path = $menu.attr('href');
		// load html
		$('#content').load(path, function() {
			// scroll to top
			$('html,body').animate({
				scrollTop : 0
			}, 0);
		});
	}
</script>
</html>